<template>
  <div class="list-table">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('基金名称')" prop="dealName">
        <fund-select
          v-model="queryParams.fundId"
          :placeholder="$t('基金名称')"
          clearable
          @change="changeDeal"
        />
      </el-form-item>
      <el-form-item :label="$t('部门')" prop="deptId">
        <DeptSelect v-model="queryParams.deptId" :placeholder="$t('部门')" @change="changeDeal" />
      </el-form-item>
      <el-form-item :label="$t('负责人')" prop="userId">
        <userSelect
          v-model="queryParams.userId"
          size="small"
          :placeholder="$t('负责人')"
          clearable
          @change="changeDeal"
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('项目行业')" prop="dealIndustry">
        <el-select
          v-model="queryParams.dealIndustry"
          size="small"
          :placeholder="$t('项目行业')"
          clearable
          @change="changeDeal"
          @keyup.enter.native="queryHandle"
        >
          <el-option v-for="item in industryOptions" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <div v-loading="infoLoading" class="deal-before-box">
      <div class="content-box deal-before-evolve">
        <div class="title" style="height: 33px">投前进展情况 <i class="el-icon-warning-outline" /></div>
        <div class="flex">
          <div class="column">
            <div class="head">{{ $t('本年新增项目') }}</div>
            <div class="money" style="cursor: pointer" @click="getDeal('year')">{{ dashboardInfo && (dashboardInfo.yearCount || dashboardInfo.yearCount === 0) ? dashboardInfo.yearCount : '--' }}</div>
            <div class="bottom" :class="dashboardInfo && dashboardInfo.yearRatio >= 0 ? 'up' : 'down'">
              <i :class="dashboardInfo && dashboardInfo.yearRatio >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'">{{ dashboardInfo && (dashboardInfo.yearRatio || dashboardInfo.yearRatio === 0) ? moneyFormat(Math.abs(dashboardInfo.yearRatio)) + '%' : '--' }} {{ $t('同比') }}</i>
            </div>
          </div>
          <div class="column">
            <div class="head">{{ $t('本月新增项目') }}</div>
            <div class="money" style="cursor: pointer" @click="getDeal('month')">{{ dashboardInfo && (dashboardInfo.monthCount || dashboardInfo.monthCount === 0) ? dashboardInfo.monthCount : '--' }}</div>
            <div class="bottom" :class="dashboardInfo && dashboardInfo.monthRatio >= 0 ? 'up' : 'down'">
              <i :class="dashboardInfo && dashboardInfo.monthRatio >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'">{{ dashboardInfo && (dashboardInfo.monthRatio || dashboardInfo.monthRatio === 0) ? moneyFormat(Math.abs(dashboardInfo.monthRatio)) + '%' : '--' }} {{ $t('同比') }}</i>
            </div>
          </div>
          <div class="column">
            <div class="head">{{ $t('本月跟进项目') }}</div>
            <div class="money" style="cursor: pointer" @click="getDeal('track')">{{ dashboardInfo && (dashboardInfo.trackCount || dashboardInfo.trackCount === 0) ? dashboardInfo.trackCount : '--' }}</div>
            <div class="bottom" :class="dashboardInfo && dashboardInfo.trackRatio >= 0 ? 'up' : 'down'">
              <i :class="dashboardInfo && dashboardInfo.trackRatio >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'">{{ dashboardInfo && (dashboardInfo.trackRatio || dashboardInfo.trackRatio === 0) ? moneyFormat(Math.abs(dashboardInfo.trackRatio)) + '%' : '--' }} {{ $t('同比') }}</i>
            </div>
          </div>
        </div>
      </div>
      <div class="content-box overview">
        <div class="title" style="width: 100%">
          {{ $t('执行中项目概况(数量/规模(万))') }} <i class="el-icon-warning-outline" />
          <span style="display:inline-block;margin-left: 5px">{{ $t('合计: ') + (totalCount + '/' + moneyFormat(totalAmount,'w',2,true)) }}</span>
          <div class="selected" style="flex: 1;text-align: right">
            <el-select v-model="queryParams.infoDealType" class="w100 bg" size="mini" :placeholder="$t('请选择')" @change="changeDealType">
              <el-option
                v-for="dict in dealTypeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </div>
        </div>
        <div class="flex">
          <div class="column mart10" style="width: 100%;margin-top: 0;">
            <deal-execute-bar-chart height="80px" :chart-data="dashboardInfo.executeDeal" />
          </div>
        </div>
      </div>
    </div>
    <el-row :gutter="20" class="mt15">
      <el-col v-loading="industryLoading" :span="8">
        <div class="area-header">
          <span class="area-header-title">{{ $t('行业分布') }}</span>
          <div class="dealBeforeDashboardTags">
            <span class="btn">
              <el-button :class="queryParams.industryNodeType === 'number' ? 'on' : 'default'" type="text" @click="changeTag('industry','number')">{{ $t('数量') }}</el-button>
              <el-button :class="queryParams.industryNodeType === 'amount' ? 'on' : 'default'" type="text" @click="changeTag('industry','amount')">{{ $t('规模(万)') }}</el-button>
            </span>
            <el-select v-model="queryParams.industrySearchType" style="width: 75px" class="w100" size="mini" :placeholder="$t('请选择')" @change="onChange('industry')">
              <el-option
                v-for="dict in options"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </div>
        </div>
        <pieChart v-if="chartData1.datas.length > 0" :chart-data="chartData1" height="300px" @xData="tooltipClick" />
        <div v-else class="noneData" style="height: 300px">
          <div>
            <svg-icon icon-class="none" class-name="none-icon" />
            <p>{{ $t('暂无数据') }}</p>
          </div>
        </div>
      </el-col>
      <el-col v-loading="areaLoading" :span="8">
        <div class="area-header">
          <span class="area-header-title">{{ $t('地域分布') }}</span>
          <div class="dealBeforeDashboardTags">
            <span class="btn">
              <el-button :class="queryParams.areaNodeType === 'number' ? 'on' : 'default'" type="text" @click="changeTag('area','number')">{{ $t('数量') }}</el-button>
              <el-button :class="queryParams.areaNodeType === 'amount' ? 'on' : 'default'" type="text" @click="changeTag('area','amount')">{{ $t('规模(万)') }}</el-button>
            </span>
            <el-select v-model="queryParams.areaSearchType" style="width: 75px" class="w100" size="mini" :placeholder="$t('请选择')" @change="onChange('area')">
              <el-option
                v-for="dict in options"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </div>
        </div>
        <pieChart v-if="chartData2.datas.length > 0" :chart-data="chartData2" height="300px" @xData="tooltipClick" />
        <div v-else class="noneData" style="height: 300px">
          <div>
            <svg-icon icon-class="none" class-name="none-icon" />
            <p>{{ $t('暂无数据') }}</p>
          </div>
        </div>
      </el-col>
      <el-col v-loading="dealTypeLoading" :span="8">
        <div class="area-header">
          <span class="area-header-title">{{ $t('来源分布') }}</span>
          <div class="dealBeforeDashboardTags">
            <span class="btn">
              <el-button :class="queryParams.dealTypeNodeType === 'number' ? 'on' : 'default'" type="text" @click="changeTag('dealType','number')">{{ $t('数量') }}</el-button>
              <el-button :class="queryParams.dealTypeNodeType === 'amount' ? 'on' : 'default'" type="text" @click="changeTag('dealType','amount')">{{ $t('规模(万)') }}</el-button>
            </span>
            <el-select v-model="queryParams.sourceSearchType" style="width: 75px" class="w100" size="mini" :placeholder="$t('请选择')" @change="onChange('dealType')">
              <el-option
                v-for="dict in options"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </div>
        </div>
        <pieChart v-if="chartData3.datas.length > 0" :chart-data="chartData3" height="300px" @xData="tooltipClick" />
        <div v-else class="noneData" style="height: 300px">
          <div>
            <svg-icon icon-class="none" class-name="none-icon" />
            <p>{{ $t('暂无数据') }}</p>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="mt15">
        <div class="area-header">
          <span class="area-header-title">阶段分布及转化率</span>
          <div class="stage-select">
            <el-select v-model="queryParams.dealType" :popper-append-to-body="false" class="w70" size="mini" :placeholder="$t('请选择')" @change="changeStage">
              <el-option
                v-for="dict in dealTypeOptions"
                :key="dict.dictValue"
                class="li-select"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
            <el-select v-model="queryParams.stageType" class="w100" style="width: 75px" size="mini" :placeholder="$t('请选择')" @change="changeStage">
              <el-option
                v-for="dict in options"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </div>
        </div>
        <Empty :data="chartData5.datas">
          <funnelChart v-if="chartData5.datas.length > 0" ref="funnelChart" :chart-data="chartData5" height="300px" @xData="funnelChartClick" />
        </Empty>
      </el-col>
      <el-col :span="16" class="mt15">
        <div class="area-header">
          <span class="area-header-title">{{ $t('人员统计') }}</span>
        </div>
        <Empty :data="chartData4.datas">
          <barLineChart v-if="chartData4.datas.length > 0" ref="barChart" :chart-data="chartData4" height="300px" />
        </Empty>
      </el-col>
    </el-row>
    <div class="area-header">
      <span class="area-header-title">{{ $t('项目跟踪') }}</span>
    </div>
    <el-table ref="table" v-loading="loading" :row-class-name="rowClassName" :data="trackInfoList" max-height="600" border>
      <el-table-column align="center" prop="dealName" :label="$t('项目名称')" show-overflow-tooltip min-width="180">
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
            :style="scope.row.lastMonth ? '' : 'color:red'"
            class="link_a"
          >{{ scope.row.dealName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="personChargeName" :label="$t('负责人')" min-width="90" />
      <el-table-column :label="$t('最近一周')" min-width="250" prop="lastWeek" class-name="alinTop">
        <template slot-scope="scope">
          <div class="progressTimeLine">
            <el-row v-for="(item, index) in scope.row.lastWeek" :key="index">
              <div size="mini" class="progressItem" @click="viewTrack(item)">
                <div v-if="item.msgCount > 1" class="msgCount">
                  <svg-icon icon-class="message" />
                  <span class="icon">{{ item.msgCount }}</span>
                </div>
                <p class="tit">
                  <span class="text">{{ formatText(item.details) }}</span>
                </p>
                <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                <div class="bottom">
                  <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                  <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                </div>
                <div class="bottom">
                  <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                  <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                </div>
              </div>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('上一周')" min-width="250" prop="pastWeek" class-name="alinTop">
        <template slot-scope="scope">
          <div class="progressTimeLine">
            <el-row v-for="(item, index) in scope.row.pastWeek" :key="index">
              <div size="mini" class="progressItem" @click="viewTrack(item)">
                <div v-if="item.msgCount > 1" class="msgCount">
                  <svg-icon icon-class="message" />
                  <span class="icon">{{ item.msgCount }}</span>
                </div>
                <p class="tit">
                  <span class="text">{{ formatText(item.details) }}</span>
                </p>
                <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                <div class="bottom">
                  <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                  <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                </div>
                <div class="bottom">
                  <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                  <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                </div>
              </div>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('历史三次跟踪')" min-width="250" prop="historyNearlyThree">
        <template slot-scope="scope">
          <div class="progressTimeLine">
            <el-row v-for="(item, index) in scope.row.historyNearlyThree" :key="index">
              <div size="mini" class="progressItem" @click="viewTrack(item)">
                <div v-if="item.msgCount > 1" class="msgCount">
                  <svg-icon icon-class="message" />
                  <span class="icon">{{ item.msgCount }}</span>
                </div>
                <p class="tit">
                  <span class="text">{{ formatText(item.details) }}</span>
                </p>
                <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                <div class="bottom">
                  <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                  <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                </div>
                <div class="bottom">
                  <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                  <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                </div>
              </div>
            </el-row>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="pageChangeHandle"
    />

    <!-- 添加或修改项目跟踪对话框 -->
    <el-dialog :title="$t('项目')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" :destroy-on-close="true" custom-class="dialogForm" append-to-body>
      <div v-loading="trackLoading" class="parentStyle" style="height: 100%;">
        <el-table ref="table" :row-class-name="rowClassName" height="calc(100% - 75px)" :data="trackList" border>
          <el-table-column align="center" prop="dealName" :label="$t('项目名称')" show-overflow-tooltip min-width="180">
            <template slot-scope="scope">
              <router-link
                target="_blank"
                :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
                :style="scope.row.lastMonth ? '' : 'color:red'"
                class="link_a"
              >{{ scope.row.dealName }}</router-link>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="personChargeName" :label="$t('负责人')" min-width="90" />
          <el-table-column :label="$t('最近一周')" min-width="250" prop="lastWeek" class-name="alinTop">
            <template slot-scope="scope">
              <div class="progressTimeLine">
                <el-row v-for="(item, index) in scope.row.lastWeek" :key="index">
                  <div size="mini" class="progressItem" @click="viewTrack(item)">
                    <div v-if="item.msgCount > 1" class="msgCount">
                      <svg-icon icon-class="message" />
                      <span class="icon">{{ item.msgCount }}</span>
                    </div>
                    <p class="tit">
                      <span class="text">{{ formatText(item.details) }}</span>
                    </p>
                    <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                    <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                    <div class="bottom">
                      <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                      <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                    </div>
                    <div class="bottom">
                      <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                      <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                    </div>
                  </div>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('上一周')" min-width="250" prop="pastWeek" class-name="alinTop">
            <template slot-scope="scope">
              <div class="progressTimeLine">
                <el-row v-for="(item, index) in scope.row.pastWeek" :key="index">
                  <div size="mini" class="progressItem" @click="viewTrack(item)">
                    <div v-if="item.msgCount > 1" class="msgCount">
                      <svg-icon icon-class="message" />
                      <span class="icon">{{ item.msgCount }}</span>
                    </div>
                    <p class="tit">
                      <span class="text">{{ formatText(item.details) }}</span>
                    </p>
                    <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                    <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                    <div class="bottom">
                      <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                      <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                    </div>
                    <div class="bottom">
                      <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                      <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                    </div>
                  </div>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('历史三次跟踪')" min-width="250" prop="historyNearlyThree">
            <template slot-scope="scope">
              <div class="progressTimeLine">
                <el-row v-for="(item, index) in scope.row.historyNearlyThree" :key="index">
                  <div size="mini" class="progressItem" @click="viewTrack(item)">
                    <div v-if="item.msgCount > 1" class="msgCount">
                      <svg-icon icon-class="message" />
                      <span class="icon">{{ item.msgCount }}</span>
                    </div>
                    <p class="tit">
                      <span class="text">{{ formatText(item.details) }}</span>
                    </p>
                    <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                    <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                    <div class="bottom">
                      <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                      <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                    </div>
                    <div class="bottom">
                      <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                      <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                    </div>
                  </div>
                </el-row>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="trackTotal>0"
          :total="trackTotal"
          :page.sync="trackQuery.pageNum"
          :limit.sync="trackQuery.pageSize"
          @pagination="getTrackList"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pieChart from '@/views/chart/pieChart.vue'
import funnelChart from '@/views/chart/funnelChart.vue'
import barLineChart from '@/views/chart/barLineChart.vue'
// import funnelChart from '@/views/deal/report/chart/dealBefore/funnelChart.vue'
import { trackInfo } from '@/api/deal/track/dealTrack'
import { getChart, getDealBeforeDashboardInfo, getIndustry, getBarChart, getStageChart } from '@/api/deal/before/dealBeforeBoard'
import { moneyFormat } from '../../../utils/ruoyi'
import FundSelect from '@/components/Select/fundSelect.vue'
import DealExecuteBarChart from '@/views/deal/report/chart/dealBefore/dealExecuteBarChart.vue'
import { Decimal } from 'decimal.js'
export default {
  components: { DealExecuteBarChart, FundSelect, pieChart, barLineChart, funnelChart },
  data() {
    return {
      options: [
        { dictValue: 'year', dictLabel: '本年' },
        { dictValue: 'all', dictLabel: '全部' }
      ],
      values: '',
      chartData1: {
        datas: []
      },
      chartData2: {
        datas: []
      },
      chartData3: {
        datas: []
      },
      chartData4: {
        datas: []
      },
      chartData5: {
        datas: []
      },
      total: 0,
      loading: false,
      trackInfoList: [],
      trackList: [],
      trackTotal: 0,
      trackQuery: {
        pageNum: 1,
        pageSize: 20
      },
      queryParams: {
        fundId: undefined,
        deptId: undefined,
        userId: undefined,
        dealStatus: undefined,
        trackTime: undefined,
        levelConcern: undefined,
        industryNodeType: 'number',
        areaNodeType: 'number',
        dealTypeNodeType: 'number',
        pageNum: 1,
        pageSize: 20,
        dealType: 'equity',
        infoDealType: 'equity',
        industrySearchType: 'year',
        areaSearchType: 'year',
        sourceSearchType: 'year',
        stageType: 'year',
        dealIndustry: undefined
      },
      formOpen: false,
      itemTypeOptions: [],
      trackModeOptions: [],
      infoLoading: true,
      // 看板数据
      dashboardInfo: null,
      industryShowChart: true,
      areaShowChart: true,
      dealTypeShowChart: true,
      dealTypeOptions: [],
      chartName: undefined,
      industryLoading: true,
      areaLoading: true,
      dealTypeLoading: true,
      stageChartName: undefined,
      trackLoading: false,
      // 行业字典
      industryOptions: [],
      // 执行中项目个数及项目总金额
      totalCount: 0,
      totalAmount: 0
    }
  },
  computed: {
  },
  created() {
    this.getDicts('item_type').then(response => {
      this.itemTypeOptions = response.data
    })
    this.getDicts('track_mode').then(response => {
      this.trackModeOptions = response.data
    })
    this.getDicts('deal_type').then(res => {
      this.dealTypeOptions = res.data
    })
    getIndustry().then(res => {
      this.industryOptions = res.data
    })
    this.getDealBeforeDashboardInfo()
    this.getChart('industry', this.queryParams.industryNodeType)
    this.getChart('area', this.queryParams.areaNodeType)
    this.getChart('dealType', this.queryParams.dealTypeNodeType)
    this.getList()
  },
  mounted() {
  },
  methods: {
    moneyFormat,
    getDealBeforeDashboardInfo() {
      this.infoLoading = true
      getDealBeforeDashboardInfo(this.queryParams).then(res => {
        if (res.data && res.data.executeDeal) {
          var sumCount = new Decimal(0)
          var sumAmount = new Decimal(0)
          res.data.executeDeal.forEach(item => {
            sumCount = sumCount.add(new Decimal(item.count))
            sumAmount = sumAmount.add(new Decimal(item.amount))
          })
          this.totalCount = sumCount.toNumber()
          this.totalAmount = sumAmount.toNumber()
        }
        this.dashboardInfo = res.data
        this.infoLoading = false
      })
    },
    changeTag(type, nodeType) {
      switch (type) {
        case 'industry':
          this.queryParams.industryNodeType = nodeType
          this.getChart(type, this.queryParams.industryNodeType)
          break
        case 'area':
          this.queryParams.areaNodeType = nodeType
          this.getChart(type, this.queryParams.areaNodeType)
          break
        case 'dealType':
          this.queryParams.dealTypeNodeType = nodeType
          this.getChart(type, this.queryParams.dealTypeNodeType)
          break
      }
    },
    getTrackList() {
      this.trackLoading = true
      this.trackQuery.fundId = this.queryParams.fundId
      this.trackQuery.deptId = this.queryParams.deptId
      this.trackQuery.userId = this.queryParams.userId
      this.trackQuery.dealType = this.queryParams.dealType
      trackInfo(this.trackQuery).then(response => {
        this.trackList = response.rows
        this.trackTotal = response.total
        this.trackLoading = false
      })
    },
    getChart(type, nodeType) {
      var searchType = ''
      if (type === 'industry') {
        this.industryLoading = true
        searchType = this.queryParams.industrySearchType
      } else if (type === 'area') {
        this.areaLoading = true
        searchType = this.queryParams.areaSearchType
      } else if (type === 'dealType') {
        this.dealTypeLoading = true
        searchType = this.queryParams.sourceSearchType
      }

      var param = {
        fundId: this.queryParams.fundId,
        deptId: this.queryParams.deptId,
        userId: this.queryParams.userId,
        dealIndustry: this.queryParams.dealIndustry,
        nodeType: nodeType,
        type: type,
        searchType: searchType
      }
      getChart(param).then(res => {
        if (type === 'industry') {
          this.industryShowChart = false
          this.chartData1 = {
            center: ['50%', '50%'],
            radius: ['30%', '50%'],
            valueFormatter: nodeType === 'amount',
            top: 'bottom',
            color: ['rgba(67, 78, 184, 1)', 'rgba(95, 105, 228, 1)', 'rgba(43, 142, 243, 1)', 'rgba(20, 201, 201, 1)', 'rgba(113, 213, 248, 1)', 'rgba(255, 223, 128, 1)', 'rgba(247, 186, 30, 1)', 'rgba(255, 99, 11, 1)', 'rgba(200, 49, 0, 1)', 'rgba(234, 172, 255, 1)', 'rgba(199, 62, 255, 1)', 'rgba(133, 0, 255, 1)', 'rgba(57, 0, 229, 1)'],
            datas: res.data
          }
          this.chartData1.datas = this.chartData1.datas.map(ele => { return { value: ele.nodeValue, name: this.$t(ele.nodeName), dictValue: ele.dictValue, type: type } })
          this.industryShowChart = true
          this.industryLoading = false
        } else if (type === 'area') {
          this.areaShowChart = false
          this.chartData2 = {
            center: ['50%', '50%'],
            radius: ['30%', '50%'],
            valueFormatter: nodeType === 'amount',
            top: 'bottom',
            color: ['rgba(67, 78, 184, 1)', 'rgba(95, 105, 228, 1)', 'rgba(43, 142, 243, 1)', 'rgba(20, 201, 201, 1)', 'rgba(113, 213, 248, 1)', 'rgba(255, 223, 128, 1)', 'rgba(247, 186, 30, 1)', 'rgba(255, 99, 11, 1)', 'rgba(200, 49, 0, 1)', 'rgba(234, 172, 255, 1)', 'rgba(199, 62, 255, 1)', 'rgba(133, 0, 255, 1)', 'rgba(57, 0, 229, 1)'],
            datas: res.data
          }
          this.chartData2.datas = this.chartData2.datas.map(ele => { return { value: ele.nodeValue, name: this.$t(ele.nodeName), dictValue: ele.dictValue, type: type } })
          this.areaShowChart = true
          this.areaLoading = false
        } else if (type === 'dealType') {
          this.dealTypeShowChart = false
          this.chartData3 = {
            center: ['50%', '50%'],
            radius: ['30%', '50%'],
            valueFormatter: nodeType === 'amount',
            top: 'bottom',
            color: ['rgba(67, 78, 184, 1)', 'rgba(95, 105, 228, 1)', 'rgba(43, 142, 243, 1)', 'rgba(20, 201, 201, 1)', 'rgba(113, 213, 248, 1)', 'rgba(255, 223, 128, 1)', 'rgba(247, 186, 30, 1)', 'rgba(255, 99, 11, 1)', 'rgba(200, 49, 0, 1)', 'rgba(234, 172, 255, 1)', 'rgba(199, 62, 255, 1)', 'rgba(133, 0, 255, 1)', 'rgba(57, 0, 229, 1)'],
            datas: res.data
          }
          this.chartData3.datas = this.chartData3.datas.map(ele => { return { value: ele.nodeValue, name: this.$t(ele.nodeName), dictValue: ele.dictValue, type: type } })
          this.dealTypeShowChart = true
          this.dealTypeLoading = false
        }
      })
    },

    tooltipClick(val) {
      this.trackQuery = {
        pageNum: 1,
        pageSize: 20,
        searchType: '',
        dealIndustry: this.queryParams.dealIndustry
      }
      this.formOpen = true
      if (val.type === 'industry') {
        this.trackQuery.industry = val.dictValue
        this.trackQuery.searchType = this.queryParams.industrySearchType
      } else if (val.type === 'area') {
        this.trackQuery.area = val.dictValue
        this.trackQuery.searchType = this.queryParams.areaSearchType
      } else if (val.type === 'dealType') {
        this.trackQuery.trackType = val.dictValue
        this.trackQuery.searchType = this.queryParams.sourceSearchType
      }
      this.getTrackList()
    },
    getDeal(type) {
      this.formOpen = true
      this.trackQuery.type = type
      this.trackQuery.nodeName = undefined
      this.trackQuery.pageNum = 1
      this.trackQuery.area = undefined
      this.trackQuery.industry = undefined
      this.trackQuery.trackType = undefined
      this.trackQuery.stageNodeName = undefined
      this.getTrackList()
    },
    getNodeDeal(nodeName) {
      this.formOpen = true
      this.trackQuery.type = undefined
      this.trackQuery.nodeName = nodeName
      this.trackQuery.pageNum = 1
      this.trackQuery.area = undefined
      this.trackQuery.industry = undefined
      this.trackQuery.trackType = undefined
      this.trackQuery.stageNodeName = undefined
      this.getTrackList()
    },
    onChange(type) {
      switch (type) {
        case 'industry':
          this.getChart(type, this.queryParams.industryNodeType)
          break
        case 'area':
          this.getChart(type, this.queryParams.areaNodeType)
          break
        case 'dealType':
          this.getChart(type, this.queryParams.dealTypeNodeType)
          break
      }
    },
    getList() {
      this.loading = true
      trackInfo(this.queryParams).then(response => {
        this.trackInfoList = response.rows
        this.total = response.total
        this.loading = false
      })
      // 人员统计
      getBarChart(this.queryParams).then(res => {
        var rows = res.data.data || []
        if (rows.length > 0) {
          this.chartData4.xLabel = res.data.userList
          this.chartData4.barWidth = 20
          this.chartData4.legend = true
          this.chartData4.datas = rows
          this.chartData4.color = ['rgba(67, 78, 184, 1)', 'rgba(95, 105, 228, 1)', 'rgba(43, 142, 243, 1)', 'rgba(20, 201, 201, 1)', 'rgba(113, 213, 248, 1)', 'rgba(255, 223, 128, 1)', 'rgba(247, 186, 30, 1)', 'rgba(255, 99, 11, 1)', 'rgba(200, 49, 0, 1)', 'rgba(234, 172, 255, 1)', 'rgba(199, 62, 255, 1)', 'rgba(133, 0, 255, 1)', 'rgba(57, 0, 229, 1)']
          this.chartData4.datas.forEach(v => {
            v.name = v.nodeName
            v.type = 'bar'
            v.stack = '1'
          })
        } else {
          this.chartData4 = {
            datas: []
          }
        }
      })
      // 阶段分布及转化率
      this.changeStage()
    },
    funnelChartClick(params) {
      this.trackQuery = {
        pageNum: 1,
        pageSize: 20,
        type: undefined,
        nodeName: undefined,
        area: undefined,
        industry: undefined,
        searchType: undefined
      }
      this.trackQuery.stageNodeName = params.name
      this.trackQuery.searchType = this.queryParams.stageType
      this.trackQuery.dealIndustry = this.queryParams.dealIndustry

      this.formOpen = true
      this.getTrackList()
    },
    changeStage() {
      this.queryParams.searchType = this.queryParams.stageType
      getStageChart(this.queryParams).then(res => {
        if (res.data.length > 0) {
          var length = res.data.length
          var sum = 20 * (length + 1)
          res.data.forEach(item => {
            item.name = item.nodeName
            item.value = sum -= 20
          })
          this.chartData5 = {
            color: ['rgba(67, 78, 184, 1)', 'rgba(95, 105, 228, 1)', 'rgba(43, 142, 243, 1)', 'rgba(20, 201, 201, 1)', 'rgba(113, 213, 248, 1)', 'rgba(255, 223, 128, 1)', 'rgba(247, 186, 30, 1)', 'rgba(255, 99, 11, 1)', 'rgba(200, 49, 0, 1)', 'rgba(234, 172, 255, 1)', 'rgba(199, 62, 255, 1)', 'rgba(133, 0, 255, 1)', 'rgba(57, 0, 229, 1)'],
            datas: res.data
          }
        } else {
          this.chartData5 = {
            datas: []
          }
        }
      })
    },
    pageChangeHandle() {
      this.getList()
      this.$refs.table.bodyWrapper.scrollTop = 0
    },
    itemTypeFormat(row) {
      return this.selectDictLabel(this.itemTypeOptions, row)
    },
    trackModeFormat(row) {
      return this.selectDictLabel(this.trackModeOptions, row)
    },
    formatText(htmlStr) {
      if (!htmlStr) return ''
      return htmlStr.replace(/<\/?.+?>/g, '').replace(/ /g, '').replace(/&nbsp;/ig, '')
    },
    changeDealType() {
      this.getDealBeforeDashboardInfo()
    },
    changeDeal() {
      // this.queryHandle()
    },

    queryHandle() {
      this.getDealBeforeDashboardInfo()
      this.getChart('industry', this.queryParams.industryNodeType)
      this.getChart('area', this.queryParams.areaNodeType)
      this.getChart('dealType', this.queryParams.dealTypeNodeType)
      this.$refs.funnelChart.initChart()
      this.$refs.barChart.initChart()
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        fundId: undefined,
        deptId: undefined,
        userId: undefined,
        dealStatus: undefined,
        trackTime: undefined,
        levelConcern: undefined,
        industryNodeType: 'number',
        areaNodeType: 'number',
        dealTypeNodeType: 'number',
        pageNum: 1,
        pageSize: 20,
        dealType: 'equity',
        infoDealType: 'equity',
        industrySearchType: 'year',
        areaSearchType: 'year',
        sourceSearchType: 'year',
        stageType: 'year',
        type: undefined,
        nodeName: undefined,
        area: undefined,
        industry: undefined
      }
      this.resetForm('queryForm')
      this.queryHandle()
    }
  }
}
</script>
<style lang="scss" scoped>
.deal-before-box{
  display: flex;
  column-gap: 15px;
  .content-box{
    flex: 1;
    background: rgba(97, 107, 204, 1);
    border-radius: 4px;
    padding: 5px 20px 0px;
    &:first-child{
      width: 200px;
      max-width: 500px;
      .title{
        color: rgba(255, 255, 255, 0.87);
      }
    }
    .title{
      font-size: 13px;
      font-weight: 400;
      display: flex;
      align-items: center;
      i{
        font-size: 12px;
        color: rgba(0,0,0,.45);
        margin-left: 5px;
        cursor: pointer;
      }
    }
    .flex{
      display: flex;
      align-items: center;
      column-gap: 15px;
      margin-top: 5px;
      .column{
        text-align: center;
        flex: 1;
        &:nth-child(2){
          border-right: 1px solid rgba(255, 255, 255, .2);
          border-left: 1px solid rgba(255, 255, 255, .2);
          padding: 0 10px;
        }
      }
      .head{
        font-size: 12px;
        font-weight: 400;
        color: rgba(0,0,0,.65);
      }
      .money {
        color: #fff;
        font-size: 21px;
        margin: 7px 0 5px;
        font-weight: 700;
        font-family: DIN;
      }
    }
  }
  .overview{
    border: 1px solid rgba(215, 226, 252, 1);
    background: rgba(248, 249, 254, 1);
    .title{
      color: rgba(0, 0, 0, 0.87);
    }
  }
}
.deal-before-evolve{
  color: #fff;
  .title{
    i{
      color: rgba(255,255,255,.6)!important;
    }
  }
  .flex{
    .head{
      color: rgba(255,255,255,.75)!important;
    }
  }
  .bottom{
    font-size: 12px;
    font-weight: 400;
  }
  .up{
    color: rgba(255, 93, 93, 1);
  }
  .down{
    color: rgba(0, 250, 131, 1);
  }
}
.mart10{
  margin-top: 10px;
}
.w100{
  width: 100px;
}
/deep/.w70{
  width: 100px;
  /*右侧图标样式  \e790下箭头图标*/
  .el-input .el-select__caret.el-input__icon::before {
    content: "\e790";
    color: #333;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /*如果不设置图标下拉时是反的*/
  .el-input .el-select__caret {
    transform: rotateZ(0deg);
  }
  .el-input {
    position: relative;
    right: -8px;
  }
  input {
    border: none;
    padding-right: 0;
    position: relative;
    right: -10px;
  }
}
.list-table {
  .area-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .area-header-title {
    font-size: 16px;
    font-family: PingFangSC-Medium,PingFang SC;
    font-weight: 700;
    color: #000;
    line-height: 30px;
    padding: 0;
    &::before{
      content: unset;
    }
  }
}
.text{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: 50px;
}
.msgCount{
    position: relative;
    display: inline-block;
    float: right;
    padding: 0 3px 0 0;
    margin-left: 10px;
    .icon{
      background-color: #f56c6c;
      border-radius: 10px;
      color: #fff;
      display: inline-block;
      font-size: 12px;
      height: 18px;
      line-height: 18px;
      padding: 0 6px;
      text-align: center;
      white-space: nowrap;
      position: absolute;
      right: -8px;
      top: -3px;
      zoom: 0.9;
    }
}

/deep/.bg .el-input__inner{
  // background-color: #E8F3FF;
}
.tag-btn-left {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
  position: relative;
  right: -5px;
}
.tag-btn-right {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0
}

/deep/ .el-select-dropdown__item.li-select.selected {
  color: #409eff !important;
}

/deep/.li-select.selected::after {
  position: absolute;
  right: 20px;
  font-family: element-icons;
  content: "\e6da";
  font-size: 12px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dealBeforeDashboardTags .btn {
  border: 1px solid rgba(220, 223, 228, 1);
  border-radius: 4px;
  padding: 1px;
  display: inline-flex;
  height: 28px;
  button{
    font-size: 13px;
    margin: 0;
    padding: 0 8px;
    height: 100%;
    line-height: normal;
  }
  .default{
    color: rgba(167, 175, 204, 1);
  }
  .on{
    background: rgba(167, 175, 204, .3);
  }
}
</style>
